<!-- Vue 自定义表单组件 -->
<template>
	<Form ref="formInline" :model="formInline" :rules="ruleInline">
		<template v-for="(item, index) in formItem">
			<view class="form-item" :prop="item.clumn">
				<!-- form-input 输入框 -->
				<template v-if="item.type == 'input'">
					<label :class="item.labelPosition == 'top' ? 'label-top' : '' ">{{item.label}}</label>
					<!-- <input :type="item.inputType ? item.inputType : 'text'" :disabled="item.disabled === true ? true : false "
						 :placeholder="item.placeholder" autocomplete="off" v-model="formInline[item.clumn]" style="border-style: none;outline: none;" /> -->
					<uni-easyinput :type="item.inputType ? item.inputType : 'text'" :disabled="item.disabled === true ? true : false "
					 :placeholder="item.placeholder" v-model="formInline[item.clumn]" :focus='item.focus ? item.focus : false'
					 :inputBorder="false" clearSize='12' :styles="styles" trim="all"></uni-easyinput>
					<template v-if="item.inputEnd">
						<select v-if="item.inputEnd == 'select'" style="outline: none;width: auto;background-color: unset;">
							<Option v-for="i in item.options" :value="i.value">{{ i.name }}</Option>
						</select>
						<template v-if="item.inputEnd == 'code'">
							<getCode :phone='$parent.formInline.account'></getCode>
						</template>
					</template>
				</template>

				<!-- radio-group 单选按钮组 -->
				<template v-if="item.type == 'radio'">
					<label :class="item.labelPosition == 'top' ? 'label-top' : '' ">{{item.label}}</label>
					<radio-group style="flex: 1;">
						<label v-for="(i, index) in item.options">
							<radio :value="i.value" :key="index" :checked="i.checked ? i.checked : false"><text>{{ i.text }}</text></radio>
						</label>
					</radio-group>
				</template>

				<!-- form-input-picker选择器 -->
				<template v-if="item.type == 'picker'">
					<label :class="item.labelPosition == 'top' ? 'label-top' : '' ">{{item.label}}</label>
					<!-- form-input-picker-selector 普通选择器 -->
					<template v-if="item.pickerType == '' || item.pickerType == 'selector'">
						<picker mode="selector" :range="item.array" @change="pickerChange($event,item.clumn,index)" :value="formInline[item.clumn]">
							<uni-easyinput :placeholder="item.placeholder" :value='formInline[item.clumn]' name='' disabled="disabled"
							 suffixIcon="arrowdown" :inputBorder="false" :styles="styles"></uni-easyinput>
						</picker>
					</template>
					<!-- form-input-picker-date 日期选择器 -->
					<template v-else-if="item.pickerType == 'date'">
						<picker mode="date" v-model="formInline[item.clumn]" :start="startDate" :end="endDate" @change="pickerChange($event,item.clumn,index)">
							<uni-easyinput :placeholder="item.placeholder" :value='formInline[item.clumn]' name='' disabled="disabled"
							 suffixIcon="arrowdown" :inputBorder="false" :styles="styles"></uni-easyinput>
						</picker>
					</template>
					<!-- form-input-picker-multiSelector 多列选择器 -->
					<template v-else-if="item.pickerType == 'multiSelector'">
						<view style="flex: 1;" @click="toggleTab">
							<uni-easyinput :placeholder="item.placeholder" :value='formInline[item.clumn]' name='' disabled="disabled"
							 suffixIcon="arrowdown" :inputBorder="false" :styles="styles"></uni-easyinput>
						</view>
						<uni-popup ref="popup" type="bottom">
							<view class="popup">
								<view class="picker-btn">
									<view class="btn-left" @click="cancel">取消</view>
									<view class="btn-right" @click="confirm">确定</view>
								</view>
								<picker-view :indicator-style="indicatorStyle" :value="item.multiIndex" @change="pickerChange($event,item.clumn,index)">
									<picker-view-column>
										<view class="picker-view-item" v-for="(item,index) in item.multiArray" :key="index">{{item.name}}</view>
									</picker-view-column>
									<picker-view-column v-if="item.multiArray[item.multiIndex[0]]">
										<view class="picker-view-item" v-for="(item,index) in item.multiArray[item.multiIndex[0]].children" :key="index">{{item.name}}</view>
									</picker-view-column>
									<picker-view-column v-if="item.multiArray[item.multiIndex[0]]">
										<view class="picker-view-item" v-for="(item,index) in item.multiArray[item.multiIndex[0]].children[item.multiIndex[1]].children"
										 :key="index">{{item.name}}</view>
									</picker-view-column>
									<picker-view-column v-if="item.multiArray[item.multiIndex[0]]">
										<view class="picker-view-item" v-for="(item,index) in item.multiArray[item.multiIndex[0]].children[item.multiIndex[1]].children[item.multiIndex[2]].children"
										 :key="index">{{item.name}}</view>
									</picker-view-column>
								</picker-view>
							</view>
						</uni-popup>
					</template>
					<!-- form-input-picker-region 多级非联动地区选择器 -->
					<!-- <template v-else-if="item.pickerType == 'region'">
						<view style="flex: 1;" @click="toggleTab(item.index)">
							<uni-easyinput :placeholder="item.placeholder" :value='formInline[item.clumn]' name='' disabled="disabled"
							 suffixIcon="arrowdown" :inputBorder="false" :styles="styles"></uni-easyinput>
						</view>
						<uni-popup ref="popup" type="bottom">
							<view class="popup">
								<view class="picker-btn">
									<view class="btn-left" @click="cancel">取消</view>
									<view class="btn-right" @click="confirm(index,item.index)">确定</view>
								</view>
								<picker-view :indicator-style="indicatorStyle" :value="item.multiIndex" @change="pickerChange($event,item.clumn,index)">
									<picker-view-column>
										<view class="item" v-for="(item,index) in item.multiArray" :key="index">{{item.name}}</view>
									</picker-view-column>
								</picker-view>
							</view>
						</uni-popup>
					</template> -->
				</template>

				<!-- upload-file 文件上传 -->
				<template v-if="item.type == 'uploadFile'">
					<label :class="item.labelPosition == 'top' ? 'label-top' : '' ">{{item.label}}</label>
					<!-- 上传图片 -->
					<uploadFile :fileType='item.fileType' v-if='item.fileType == "image"' :imgList='formInline[item.clumn]' @getFiles='getFiles($event,item.clumn)'
					 @delectFile='delectFile($event,item.clumn)'></uploadFile>
					<!-- 上传头像 -->
					<view class="faces-view">
						<uploadFile :fileType='item.fileType' v-if='item.fileType == "faces"' :imgList='formInline[item.clumn]' @getFiles='getFiles($event,item.clumn)'></uploadFile>
					</view>
					<!-- 上传视频 -->
					<uploadFile :fileType='item.fileType' v-if='item.fileType == "video"' :videoSrc='formInline[item.clumn]' @getFiles='getFiles($event,item.clumn)'
					 @delectFile='delectFile($event,item.clumn)'></uploadFile>
				</template>

				<!-- form-tips  提示文本 -->
				<span v-if="item.tips" style="color:red">{{item.tips}}</span>

				<!-- form-textarea 文本域 -->
				<template v-if="item.type == 'textarea'">
					<textarea :value="formInline[item.clumn]" :placeholder="item.placeholder" />
					</template>

			</view>
		</template>

		<!-- 自定义内容-插槽 -->
		<slot></slot>

		<view class="form-submit" v-if="button">
			<!-- 提交按钮 -->
			<button @click="onSubmit" type="primary">{{btnText}}</button>
			<slot name='formButton'></slot>
		</view>

	</Form>
</template>

<script>
	import uploadFile from './uploadFile.vue'
	import getCode from './getCode.vue'
	
	function getDate(type) {
		const date = new Date();

		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;

		return `${year}-${month}-${day}`;
	}

	export default {
		name: 'vForm',
		props: {
			//是否显示表格按钮
			button: {
				type: Boolean,
				default: () => true
			},
			//表单类型
			formItem: {
				type: Array,
				default: () => []
			},
			//表单字段数据
			formInline: {
				type: Object,
				default: () => {}
			},
			//自定义验证
			ruleInline: {
				type: Object,
				default: () => {}
			},
			//按钮文字
			btnText: {
				type: String,
				default: '保存'
			},
		},
		components:{
			uploadFile,
			getCode
		},
		data() {
			return {
				startDate: getDate('start'), //可选择最早日期
				endDate: getDate('end'), //可选择最晚日期
				indicatorStyle: `height: 50px;`, //picker-view 行高
				styles: {	//uni-easyinput 样式
					disableColor: 'unset', //input 禁用时的背景颜色
				}
			}
		},
		watch: {
			formInline: {
				handler(newValue, oldValue) {
					this.formInline = newValue
				},
				deep: true
			},
		},
		onReady: function(res) {
			// 获取 video 上下文 videoContext 对象
			this.videoContext = uni.createVideoContext('myVideo');
			// 进入全屏状态
			this.videoContext.requestFullScreen();
		},
		methods: {
			//表单按钮提交方法
			onSubmit: function() {
				console.log("vForm")
				console.log(this.formInline)
				this.$emit('onSubmit');
			},
			//重置表单
			resetForm: function(formName) {
				this.$refs[formName].resetFields();
			},

			//btn方法
			handleBtnClick(clickType) {
				this.$emit(clickType, this.formInline)
			},

			// picker改变时向父组件传值
			pickerChange(e, clumn, index) {
				console.log(e.detail.value)
				this.$emit('changePicker', index, clumn, e.detail.value);
				// console.log(index)
				// console.log(clumn)
			},
			
			//从子组件中直接添加获取到的文件路径
			getFiles(files,clumn){
				if(clumn == 'faces'){
					this.formInline[clumn] = files;
				} else {
					this.formInline[clumn] = this.formInline[clumn].concat(files);
				}
			},
			
			/* 从子组件中删除前端要上传的文件 */
			delectFile(e, clumn) {
				this.formInline[clumn].splice(e, 1);
			},
			
			//点击展开pop弹窗(picker-view 选择器)
			toggleTab() {
				this.$refs.popup[0].open();
			},

			//点击pop弹窗确定键
			confirm() {
				this.$refs.popup[0].close();
			},

			//点击pop弹窗取消键
			cancel() {
				this.$refs.popup[0].close();
			},

		}
	}
</script>

<style>
	.form-item {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		height: auto;
		min-height: 90rpx;
		align-items: center;
		background-color: #FFFFFF;
		padding: 10rpx 5%;
		border-bottom: 1px solid gainsboro;
	}

	.form-item label {
		width: 160rpx;
	}
	
	.label-top{
		width: 100% !important;
		padding: 10rpx 0;
	}

	.form-item image {
		width: 40rpx;
		height: 40rpx;
	}

	radio-group label+label {
		padding-left: 30rpx;
	}

	.form-item textarea {
		height: 160rpx;
		padding: 26rpx 0;
	}
	
	picker {
		flex: 1;
	}

	.popup {
		height: fit-content;
		width: 100%;
		background: #fff;
	}

	.picker-btn {
		display: flex;
		height: 100upx;
		width: 100%;
		line-height: 100upx;
		background: #fff;
		font-size: 34upx;
		z-index: 1;
		border-bottom: 1rpx solid #f8f8f8;
	}

	.btn-left {
		flex: 1;
		color: #0076FF;
		padding-left: 40upx;
		box-sizing: border-box;
	}

	.btn-right {
		flex: 1;
		text-align: right;
		padding-right: 40upx;
		color: #FE4533;
		box-sizing: border-box;
	}

	picker-view {
		width: 100%;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.picker-view-item {
		line-height: 100rpx;
		text-align: center;
	}
	
	.upload-files {
		width: 100%;
	}
	
	.faces-view {
		flex: 1;
	}

	.form-submit {
		padding: 30rpx 5%;
	}
</style>
